<template>
    <div id = "box">
      <el-container>
        <el-header>
          <el-menu
              :default-active="this.$route.path"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleNavSelect"
              background-color="#003C75"
              text-color="#fff"
              active-text-color="#ffd04b"
          >
            <el-menu-item
                v-for="(item, index) in leftNavList"
                :index="item.path"
                :key="index"
                class="leftNav">
              <span slot="title">{{ item.title }}</span>
            </el-menu-item>

            <el-menu-item class="rightNav">
              <img src="@/assets/logo.png" />
              <!-- 用户名下拉菜单 -->
              <el-dropdown class="user-name">
                            <span class="el-dropdown-link">
                                <span style="color: white">username</span>
                                <i class="el-icon-caret-bottom"></i
                                ></span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>修改密码</el-dropdown-item>
                  <el-dropdown-item command="loginout"
                  >退出登录</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </el-menu-item>

            <el-menu-item
                v-for="(item, index) in rightNavList"
                :index="item.path"
                :key="index"
                class="rightNav"
            >
              <span slot="title">{{ item.title }}</span>
            </el-menu-item>
          </el-menu>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>

      </div>
</template>

<script>
import router from "@/router";

export default {
    data() {
      return {
        enterpriseId: 0,
        leftNavList: [
          {
            path: '/enterpriseInfoMg/EnterpriseInfoShow',
            title: '企业个人中心'
          },
          {
            path: '/occupationInfoMg/AddOccupation',
            title: '企业发布职位'
          },
          {
            path: '/enterpriseInfoMg/EnterpriseInfoManage',
            title: '企业基本信息管理'
          },
          {
            path: '/enterpriseInterview/EnterpriseInterview',
            title: '企业面试安排'
          }
        ],
        rightNavList: [
          {
            path: '',
            title: '简历'
          },
          {
            path: '/message/MessageView1',
            title: '消息'
          }
        ],
      }

    },
    created() {
      // 在组件创建时获取传递过来的id值
      this.enterpriseId = this.$store.state.id;
      // console.log('Received enterprise id:', this.enterpriseId);
      // 你可以在这里进行其他操作，比如根据id获取用户信息等
      this.userType = this.$store.state.userType
    },
    methods: {
      handleNavSelect(path) {
        if (this.$route.path !== path) {
          this.$router.push({
            path: path,
            query: {enterpriseId :this.enterpriseId ,userType: this.userType}
          })
        }
      }
    },
    computed: {
      activeIndex() {
        return '/' + this.$route.path.split('/')[1]
      }
    }


}
</script>

<style  scoped>

#box {
  /*width: 80%; !* 设置宽度 *!*/
  /*max-width: 1200px; !* 设置最大宽度，避免在大屏幕上拉伸过宽 *!*/
  /*margin: 0 auto; !* 实现水平居中 *!*/
  /*padding: 20px; !* 内边距 *!*/
  border: 1px solid #ccc; /* 边框 */
  border-radius: 10px; /* 圆角 */
  background-color: #fff; /* 背景颜色 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影 */
  height: 100vh;
  font-family: "微软雅黑", Arial, sans-serif; /* 设置字体为微软雅黑 */
}
select{
    height: 100px;
}

#main {
  width: 1400px;
  margin-right: auto;
  margin-left: auto;
}

.el-header .rightNav {
  display: flex;
  flex-shrink: 0;
  float: right;
}

</style>
